<template>
	<view class="histroySession">
		<!-- 日期按钮 -->
		<view class="changeTime flex-between">
			<!-- 开始日期 -->
			<view style="flex:1" class="date-item">
				<view class="flex-center">
					<uni-datetime-picker type="date" v-model="start_time" placeholder="开始时间" @change="startDateConfirm">{{startDateValue}}</uni-datetime-picker>
				</view>
			</view>
			
			<!-- 结束日期 -->
			<view style="flex:1" class="date-item">
				<view class="flex-center">
					<uni-datetime-picker type="date" v-model="end_time" placeholder="结束时间" @change="endDateConfirm">{{endDateValue}}</uni-datetime-picker>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-Y sessionList">
			<view class="sessionItem" v-for="item in sessionList">
				<view class="title flex-between">
					<view class="left">钓场：{{item.fish_place_name}}</view>
					<view class="right" style="font-size: 22rpx;">{{item.fish_new_type==0?'定时鱼票':'循环鱼票'}}</view>
				</view>
				<view class="title flex-between">
					<view class="left">场次：{{item.date}} {{item.title}}</view>
					<view  class="right2">当前禁止换位</view>
				</view>
				<view class="content">
					<view><label for="">场次状态：</label>{{item.now_state}}</view>
					<view v-if="item.fish_new_type==0"><label for="">开场时间：</label>{{item.start_time}}</view>
					<view v-if="item.fish_new_type==0"><label for="">结束时间：</label>{{item.end_time}}</view>
					<view v-if="item.fish_new_type==1"><label for="">开场时间：</label>{{item.venue_start_date}}</view>
					<view v-if="item.fish_new_type==1"><label for="">结束时间：</label>{{item.venue_end_date}}</view>
					<view v-if="item.hours"><label for="">垂钓时长：</label>{{item.hours}}</view>
					<view><label for="">收鱼价格：</label>未设置 <text class="set">设置</text></view>
					<view class="red"><label for="">售票：</label>售票中（0/20）</view>
				</view>
				<view class="operations flex-around">
					<view class="operation">
						<image style="width: 40rpx;" src="/static/svg/operation2.svg" mode="widthFix"></image>
						<view>控制中心</view>
					</view>
					<view class="operation" @click="goto('/pages/fishTickets/orderList/index', item.id)">
						<image style="width: 40rpx;" src="/static/svg/operation5_red.svg" mode="widthFix"></image>
						<view class="red">售票订单</view>
					</view>
					<view class="operation" @click="goto('/pages/fishTickets/operations/controlCenter')">
						<image style="width: 40rpx;" src="/static/svg/operation4_red.svg" mode="widthFix"></image>
						<view class="red">收鱼</view>
					</view>
					<view class="operation" @click="goto('/pages/fishTickets/operations/controlCenter')">
						<image style="width: 40rpx;" src="/static/svg/operation8_red.svg" mode="widthFix"></image>
						<view class="red">结账</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { query_fish_news } from '@/utils/fishNew/index.js'
	export default {
		data() {
			return {
				startDateValue: '开始日期',
				endDateValue: '结束日期',
				start_time: '',
				end_time: '',
				sessionList:[]
			}
		},
		onLoad() {
			this.getlist()
		},
		methods: {
			startDateConfirm(e) {
				this.startDateValue = e
				this.start_time = this.start_time+' 00:00:00'
				query_fish_news({start_time:this.start_time,end_time:this.end_time}).then(res=>{
					this.sessionList = res.data
				})
			},
			endDateConfirm(e) {
				this.endDateValue = e
				this.end_time = this.end_time+' 23:59:59'
				query_fish_news({start_time:this.start_time,end_time:this.end_time}).then(res=>{
					this.sessionList = res.data
				})
			},
			goto(url, id){
				uni.navigateTo({url:url+"?id="+id})
			},
			getlist(){
				query_fish_news().then(res=>{
					this.sessionList = res.data
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.histroySession {
		background: rgba(243, 244, 246, 1);
		.red{
			color: #D43030;
		}
		.changeTime{
			height: 100rpx;
			.date-item {
				border-top: 1px solid #dfdfdf;
				text-align: center;
				font-weight: 600;
				padding: 15px 0;
				background-color: #fff;
			}
		}
		.sessionList{
			margin-top: 20rpx;
			height: calc(100vh - 120rpx);
			overflow-y: auto;

			.sessionItem{
				background: #fff;
				padding: 20rpx 40rpx 0;
				margin-bottom: 20rpx;
				.title{
					height: 42rpx;
					line-height: 42rpx;
					margin-bottom: 20rpx;
					.left{
						border-left: 8rpx solid #D43030;
						padding-left: 10rpx;
						font-weight: 600;
						font-size: 26rpx;
					}
					.right{
						background: rgba(212, 48, 48, 1);
						color: #fff;
						padding: 0 12rpx;
						font-size: 24rpx;
					}
					.right2{
						color: rgba(212, 48, 48, 1);
						font-size: 24rpx;
					}
				}
				.content{
					font-size: 24rpx;
					line-height: 46rpx;
					margin-bottom: 30rpx;
					.uni-label-pointer{
						width: 144rpx;
						display: inline-block;
						color: #333;
					}
					.set{
						background: rgba(212, 48, 48, 1);
						color: #fff;
						padding: 4rpx 10rpx;
						border-radius: 8rpx;
						font-size: 22rpx;
						margin-left: 10rpx;
					}
				}
				.operations{
					flex-wrap: wrap;
					font-size: 26rpx;
					text-align: center;
					.operation{
						width: 24.6%;
						margin-bottom: 20rpx;
						padding-bottom: 20rpx;
					}

					.operation:nth-child(1),.operation:nth-child(2),.operation:nth-child(3){
						border-right: 1rpx solid #E5E5E5;
					}
				}
			}
		}
	}
</style>
